revision:
When working with language settings in CSS, you can use CSS selectors to target elements based on their language or apply styles conditionally. This is particularly useful when creating multilingual websites where different languages may require different layouts, fonts, or spacing.
:lang() - example: :lang(en) - use: style elements based on the "lang" attribute.
attribute selector - example: [lang="fr"] - use: target elements with a specific "lang" value.
class-based - example: .language-en - use: apply styles to elements with specific classes.
parent + language example: [lang="ja"] h1 - use: style child elements within a specific language context.
"dir" attribute - example [dir="rtl"] - use: handle right-to-left text direction.
By combining these techniques, you can create a robust and visually consistent multilingual website.Use this selector to style an element where the "lang" value exactly matches that in the selector.
example
*[lang="zh"] {font-family: Kaiti, Kai, serif;}
You can use attribute selectors to target elements with a specific "lang" attribute.
<div lang="fr">Bonjour</div>
<div lang="de">Hallo</div>
<style>
/* Target French content */
[lang="fr"] {font-style: italic; color: green;}
/* Target German content */ [lang="de"] { font-weight: bold; color: purple;}
</style>
exact match: selects elements where the "lang" attribute exactly matches the specified value.
case sensitivity: by default, it is case-sensitive. To make it case-insensitive, use the i flag: [lang='en' i] (matches en, EN, eN).
explicit attributes only: only targets elements with the "lang" attribute directly set on them (not inherited values).
[lang='en'] matches <p lang="en"> but not <p lang="en-US">.
<div lang="es">
<p>Hola (inherits lang="es")</p>
<p lang="en-US">Hello (explicit lang)</p>
</div>
<style>
[lang='es'] { color: red; } /* Targets the div only */
:lang(en) { font-weight: bold; } /* Targets both the div's child (inherited) and the en-US paragraph */
[lang='en-US'] { border: 1px solid; } /* Targets the en-US paragraph explicitly */
</style>
It is polite to welcome people in their own language:
It is polite to welcome people in their own language:
code:
<div>
<p id="first">It is polite to welcome people in their own language:</p>
<ul>
<li lang="zh-Hans">欢迎</li>
<li lang="zh-Hant">歡迎</li>
<li lang="el">Καλοσωρίσατε</li>
<li lang="ar">اهلا وسهلا</li>
<li lang="ru">Добро пожаловать</li>
<li lang="din">Kudual</li>
</ul>
<p id="second">It is polite to welcome people in their own language:</p>
<ul>
<li class="zhs" lang="zh-Hans">欢迎</li>
<li class="zht" lang="zh-Hant">歡迎</li>
<li class="el" lang="el">Καλοσωρίσατε</li>
<li class="ar" lang="ar">اهلا وسهلا</li>
<li class="ru" lang="ru">Добро пожаловать</li>
<li class="din" lang="din">Kudual</li>
</ul>
</div>
<style>
ul, p:not(.date){padding-left: 1vw;margin-bottom: 0.5vw;list-style: none;}
li {padding-left: 5vw;}
#first:lang(ta) {font-family: Latha, "Tamil MN", serif;font-size: 120%;}
#first:lang(ar) {font-family: "Scheherazade",serif; font-size: 120%;}
#first:lang(zh-Hant) {font-family: Kai,KaiTi,serif;}
#first:lang(zh-Hans) {font-family: DFKai-SB,BiauKai,serif;}
#first:lang(din) {font-family: "Doulos SIL",serif;}
#second[lang="ar"]{font-family: "Scheherazade",serif; font-size: 120%;}
#second[lang="zh-Hant"]{font-family: Kai,KaiTi,serif;}
#second[lang="zh-Hans"]{font-family: DFKai-SB,BiauKai, serif;}
#second[lang="din"]{font-family: "Doulos SIL",serif;}
</style>
The :lang() pseudo-class allows you to apply styles to elements based on the language specified in the "lang" attribute of the HTML element.
language-code : a valid language code (e.g., en for English, fr for French, es for Spanish, etc.). This can also include subcodes for regional variations, such as en-US for American English or en-GB for British English.
The :lang() pseudo-class matches elements whose language matches the specified language code. The language of an element is determined by:
the "lang" attribute in the HTML document.
inherited language from parent elements.
other language-determining mechanisms (like HTTP headers).
<html lang="en">
<body>
<p>English text</p>
</body>
</html>
<html lang="es">
<body>
<p>Texto en español</p>
</body>
</html>
<style>
/* Style English content */
:lang(en) p { font-family: 'Arial', sans-serif; color: blue; }
/* Style Spanish content */
:lang(es) p {font-family: 'Roboto', sans-serif; color: red; }
<p lang="en">This is English text.</p>
<p lang="fr">C'est du texte en français.</p>
<p lang="es">Este es texto en español.</p>
<style>
/* Style for English text */
:lang(en) {color: blue;}
/* Style for French text */
:lang(fr) {color: red;}
/* Style for Spanish text */
:lang(es) {color: green;}
</style>
This English quote has anestedquote inside.
This French quote has anestedquote inside.
This German quote has anestedquote inside.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
code:
<div>
<div class="spec-1" lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div class="spec-1" lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div class="spec-1"lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
<div class="spec-1">I live in Italy.<span lang="it">Ciao bella!</span></div>
<div class="spec-1"><q>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</q></div>
<div class="spec-1">This is <em>English</em>, but <span lang="ja">これは<em>日本語</em>です。
</span></div>
</div>
<style>
:lang(en) > q {quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q {quotes: '« ' ' »'; }
:lang(de) > q {quotes: '»' '«' '\2039' '\203A'; }
span:lang(it) {background: yellow;}
q:before {content: open-quote; }
q:after {content: close-quote; }
:lang(en) q {quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }
</style>
If you're dynamically adding classes to elements based on the selected language, you can use "class-based" selectors.
Language-specific classes are a common technique used in web development to apply styles or behavior to elements based on the language of the content. This approach involves adding specific CSS classes to HTML elements that correspond to different languages, allowing you to target those elements with language-specific styles or JavaScript logic.
A common practice is to add a class to the <html> or <body> tag that corresponds to the current language of the page. This allows you to easily target all elements within that language context.
<html class="lang-en">
<head>
<title>English Page</title>
</head>
<body>
<p>This is English text.</p>
</body>
</html>
<html class="lang-fr">
<head>
<title>French Page</title>
</head>
<body>
<p>C'est du texte en français.</p>
</body>
</html>
You can also apply language-specific classes directly to individual elements if you want more granular control over styling.
<p class="lang-en">This is English text.</p>
<p class="lang-fr">C'est du texte en français.</p>
<style>
.lang-en {color: blue;}
.lang-fr {color: red;}
</style>
<div class="language-en">Hello</div>
<div class="language-fr">Bonjour</div>
<style>
/* English-specific styles */
.language-en {font-size: 16px; color: navy; }
/* French-specific styles */
.language-fr {font-size: 18px; color: maroon;}
</style>
Combining language-specific selectors with parent selectors in CSS allows to create highly targeted styles that depend both on the language of the content and the structure of the HTML.
This approach is particularly useful when you want to apply styles to specific elements within a certain language context, but only when those elements are nested inside particular parent elements.
In CSS, parent selectors refer to the use of descendant , child , or adjacent sibling combinators to target elements based on their relationship to other elements in the DOM (Document Object Model).
These selectors allow you to apply styles based on the hierarchy or relationship between elements.
styling headings based language and parent container
<div lang="ja"> <h1>こんにちは</h1> <p>これは日本語のテキストです。</p> </div> <style> /* Style Japanese headings */ [lang="ja"] h1 { font-size: 24px; letter-spacing: 2px;} /* Style Japanese paragraphs */ [lang="ja"] p { line-height: 1.8; font-family: 'Noto Sans JP', sans-serif;} </style>
styling headings based language and parent container
<div class="content"> <h1 class="lang-en">Welcome to our English site!</h1> <h1 class="lang-fr">Bienvenue sur notre site français !</h1> </div> <div class="sidebar"> <h1 class="lang-en">Sidebar Title in English</h1> <h1 class="lang-fr">Titre de la barre latérale en français</h1> </div> <style> /* Default styles for all headings */ h1 {font-family: Arial, sans-serif; font-size: 24px; } /* English-specific styles for headings inside .content */ .content .lang-en h1 { color: blue; font-weight: bold;} /* French-specific styles for headings inside .content */ .content .lang-fr h1 { color: red; font-style: italic; } /* Sidebar headings should remain unaffected */ .sidebar h1 {color: black;} </style>
using attribute selectors with parent selectors
<div class="content"> <h1 lang="en">Welcome to our English site!</h1> <h1 lang="fr">Bienvenue sur notre site français !</h1> </div> <div class="sidebar"> <h1 lang="en">Sidebar Title in English</h1> <h1 lang="fr">Titre de la barre latérale en français</h1> </div> <style> /* Default styles for all headings */ h1 { font-family: Arial, sans-serif; font-size: 24px;} /* English-specific styles for headings inside .content */ .content h1[lang="en"] {color: blue;font-weight: bold; } /* French-specific styles for headings inside .content */ .content h1[lang="fr"] {color: red; font-style: italic; } /* Sidebar headings should remain unaffected */ .sidebar h1 { color: black; } </style>
combining ":lang()" pseudoclass with parent selector
<div class="content"> <h1>Heading in English</h1> <h1>Heading in French</h1> </div> <div class="sidebar"> <h1>Another Heading in English</h1> <h1>Another Heading in French</h1> </div> <style> /* Default styles for all headings */ h1 {font-family: Arial, sans-serif; font-size: 24px;} /* English-specific styles for headings inside .content */ .content :lang(en) {color: blue; font-weight: bold; } /* French-specific styles for headings inside .content */ .content :lang(fr) {color: red;font-style: italic; } /* Sidebar headings should remain unaffected */ .sidebar h1 {color: black;} </style>
Some languages (e.g., Chinese, Arabic, or Devanagari scripts) may require specific fonts or adjustments.
Font adjustments for different languages are a crucial aspect of web design, especially when building multilingual websites . Different languages have unique characteristics that may require specific font choices, sizes, or styles to ensure readability and aesthetic consistency.
You can apply different font families or sizes based on the language using "language-specific classes" or the "":lang() pseudo-class".
When choosing fonts for multilingual websites, consider using web-safe fonts or Google Fonts that support multiple scripts.
web-safe fonts : (examples: Arial, Times New Roman, Courier New) These fonts are widely available across devices but may lack support for non-Latin scripts.
Google Fonts : Google provides fonts like Noto Sans and Noto Serif , which are designed to support a wide range of languages and scripts.
Different languages may require adjustments to font size , line height , or letter spacing for optimal readability.
If a font doesn't support a particular language, provide fallback options to ensure text remains readable.
use language-specfic classes
<p class="lang-en">This is English text.</p> <p class="lang-fr">C'est du texte en français.</p> <p class="lang-ar">هذا نص باللغة العربية.</p> <style> /* Default font */ body {font-family: Arial, sans-serif; font-size: 16px;} /* English-specific font */ .lang-en {font-family: 'Open Sans', sans-serif; font-size: 16px; } /* French-specific font */ .lang-fr {font-family: 'Roboto', sans-serif; font-size: 18px; } /* Arabic-specific font */ .lang-ar { font-family: 'Amiri', serif; font-size: 20px; direction: rtl; /* Right-to-left text */} </style>
:lang() pseudo-class
<p class="lang-en">This is English text.</p> <p class="lang-fr">C'est du texte en français.</p> <p class="lang-ar">هذا نص باللغة العربية.</p> <style> /* Default font */ body {font-family: Arial, sans-serif; font-size: 16px;} /* English-specific font */ :lang(en) {font-family: 'Open Sans', sans-serif; font-size: 16px;} /* French-specific font */ :lang(fr) {font-family: 'Roboto', sans-serif; font-size: 18px; } /* Arabic-specific font */ :lang(ar) {font-family: 'Amiri', serif; font-size: 20px; direction: rtl; /* Right-to-left text */} </style>
use web-safe fonts or Google fonts
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Noto Sans', sans-serif;} </style>
adjust font size and line height
<style> /* Default font settings */ body {font-size: 16px; line-height: 1.5;} /* Thai-specific adjustments */ :lang(th) { font-size: 18px; /* Larger size for Thai characters */ line-height: 2; /* More spacing for readability */} /* Japanese-specific adjustments */ :lang(ja) {font-size: 17px; letter-spacing: 0.5px; /* Slightly wider spacing for clarity */} </style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multilingual Fonts</title>
<style>
/* Default font */
body {font-family: Arial, sans-serif; font-size: 16px;}
/* English-specific font */
:lang(en) {font-family: 'Open Sans', sans-serif; font-size: 16px;}
/* French-specific font */
:lang(fr) {font-family: 'Roboto', sans-serif; font-size: 18px;}
/* Arabic-specific font */
:lang(ar) {font-family: 'Amiri', serif;font-size: 20px; direction: rtl; /* Right-to-left text */}
/* Japanese-specific font */
:lang(ja) {font-family: 'Noto Sans JP', sans-serif; font-size: 17px; letter-spacing: 0.5px;}
</style>
</head>
<body>
<p lang="en">This is English text.</p>
<p lang="fr">C'est du texte en français.</p>
<p lang="ar">هذا نص باللغة العربية.</p>
<p lang="ja">これは日本語のテキストです。</p>
</body>
</html>
Dynamic language switching in a web application using JavaScript typically involves updating the content of the page based on the user's selected language. This can be achieved by storing translations in an object and then dynamically replacing the text content of HTML elements when the user selects a different language.
The translations object holds key-value pairs where each key represents a language code (en, es, fr) and the value is another object containing the translations for specific phrases.
The updateContent function takes a language code as an argument and updates the text content of the HTML elements (greeting and description) based on the selected language.
An event listener is attached to the <select> element (language-switcher). When the user changes the language, the change event is triggered, and the "updateContent function" is called with the selected language.
Initialization: the updateContent('en') call ensures that the page loads with English as the default language.
optional: you can use "localStorage" or "sessionStorage" to remember the user's language preference across sessions.
press button to change language
<button onclick="setLanguage('en')">English</button> <button onclick="setLanguage('es')">Español</button> <div id="content" lang="en"> <p>Hello, world!</p> </div> <style> /* English styles */ [lang="en"] p {color: black;} /* Spanish styles */ [lang="es"] p { color: green;} </style> <script> function setLanguage(lang) { const content = document.getElementById('content'); content.setAttribute('lang', lang); } </cript>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Language Switching</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<p id="description">Welcome to our website.</p>
<select id="language-switcher">
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
</select>
<script src="app.js"></script>
</body>
</html>
<script>
// app.js
// Define translations for each language
const translations = {
en:
{greeting: "Hello",
description: "Welcome to our website."
},
es: {
greeting: "Hola",
description: "Bienvenido a nuestro sitio web."
},
fr: {
greeting: "Bonjour",
description: "Bienvenue sur notre site web."
}
};
// Function to update the content based on the selected language
function updateContent(lang) {
document.getElementById('greeting').textContent = translations[lang].greeting;
document.getElementById('description').textContent = translations[lang].description;
}
// Event listener for language selection change
document.getElementById('language-switcher').addEventListener('change', function(event) {
const selectedLanguage = event.target.value;
updateContent(selectedLanguage);
});
// Initialize with default language (English)
updateContent('en');
</script>
optional
<script> // Save language preference to localStorage document.getElementById('language-switcher').addEventListener('change', function(event) { const selectedLanguage = event.target.value; localStorage.setItem('preferredLanguage', selectedLanguage); updateContent(selectedLanguage); }); // Load preferred language from localStorage on page load const preferredLanguage = localStorage.getItem('preferredLanguage') || 'en'; document.getElementById('language-switcher').value = preferredLanguage; updateContent(preferredLanguage); </script>
<form>
<input type="radio" name="language" value="English">English<br>
<input type="radio" name="language" value="Dutch">Dutch<br>
<input type="radio" name="language" value="French">French<br>
<input type="radio" name="language" value="German">German<br>
<input type="radio" name="language" value="Japanese">Japanese<br>
<input type="button" id="btn" value="Selected language"><br>
<p id="selection"></p>
</form>
<script>
const btn = document.querySelector('#btn');
btn.onclick = function () {
const rbs = document.querySelectorAll('input[name="language"]');
let selectedValue;
for (const rb of rbs) {
if (rb.checked) {
selectedValue = rb.value;
break;
}
}
document.getElementById('selection').innerHTML = "The selected language is " + selectedValue;
};
</script>
retrieve the language radio button selected value using JavaScript
Select the language:
English
Dutch
Chinese
Japanese
French
German
Korean
<p>retrieve the language radio button selected value using JavaScript</p>
<p>Select the language:<br>
<input type="radio" name="taal" onclick="myFunction(this)" value="English">English<br>
<input type="radio" name="taal" onclick="myFunction(this)" value="Dutch">Dutch<br>
<input type="radio" name="taal" onclick="myFunction(this)" value="Chinese">Chinese<br>
<input type="radio" name="taal" onclick="myFunction(this)" value="Japanese">Japanese<br>
<input type="radio" name="taal" onclick="myFunction(this)" value="French">French<br>
<input type="radio" name="taal" onclick="myFunction(this)" value="German">German<br>
<input type="radio" name="taal" onclick="myFunction(this)" value="Korean">Korean<br>
</p>
<script>
function myFunction(taal) {
alert(taal.value);
}
</script>
For right-to-left (RTL) languages like Arabic or Hebrew, you can use the dir attribute and style accordingly.
مرحبا بالعالم
1/ create a dropdown menu or button group for users to choose their preferred language.
<select id="languageSelector">
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
</select>
2/ use JavaScript to dynamically update the content based on the selected language.
document.getElementById('languageSelector').addEventListener('change', function() {
const selectedLang = this.value;
// Example: Redirect to a language-specific URL
window.location.href = `/${selectedLang}`;
});
3/ save the user's language preference using cookies, local storage, or session storage.
localStorage.setItem('preferredLanguage', selectedLang);
4/ always specify the language of the page in the <html> tag for accessibility and SEO.
<html lang="en"></html>
When working with Chinese text, font selection and adjustment are crucial for ensuring readability, aesthetic appeal, and cultural appropriateness. Some key considerations and tips for adjusting fonts for the Chinese language are:
Serif vs. Sans-Serif: Serif fonts : often used in print materials like books and newspapers. Examples include SimSun (宋体) and FangSong (仿宋). Sans-Serif Fonts : commonly used in digital interfaces and modern designs. Examples include Microsoft YaHei (微软雅黑), PingFang SC (苹方), and Source Han Sans (思源黑体).
Modern vs. Traditional : For a contemporary look, use modern sans-serif fonts like PingFang SC or Noto Sans CJK . For a classical or formal tone, serif fonts like SimSun or KaiTi (楷体) work well.
Chinese characters are more complex than Latin letters, so they generally require larger font sizes for readability.
Body Text : 12-16 pt for printed materials; 14-18 px for digital screens.
Headings : 18-24 pt for printed materials; 20-36 px for digital screens.
Avoid overly small sizes, as intricate strokes in Chinese characters can become illegible.
Chinese text benefits from slightly increased line spacing to improve readability.
Recommended Line Height : 1.5-2 times the font size. For example, if the font size is 16 px, set the line height to 24–32 px.
Chinese characters are typically written without spaces between words, so character spacing (kerning) should be minimal.
Default spacing is usually sufficient, but slight adjustments may be needed for specific fonts or designs.
Avoid excessive spacing, as it can disrupt the flow of reading.
Justified Alignment: common in Chinese typography, especially for formal documents.
Left-Aligned : Suitable for informal or creative designs.
Avoid fully justified text in narrow columns, as it can create uneven spacing.
If combining Chinese and English text, choose fonts that complement each other. Example: Pair Microsoft YaHei (Chinese) with Arial or Helvetica (English). Ensure consistent weight and style (e.g., bold or italic) across both languages.
Certain fonts have cultural connotations:
KaiTi (楷体) is often associated with traditional calligraphy and has a formal, elegant feel.
FangSong (仿宋) is commonly used in official documents and legal texts.
Avoid using overly playful or decorative fonts for serious content.
Use web-safe fonts like PingFang SC , Microsoft YaHei , or Noto Sans CJK for websites and apps. Enable font smoothing and anti-aliasing to ensure clear rendering on screens. Test your design on different devices to ensure compatibility.
Choose high-contrast color schemes (e.g., black text on a white background) for better readability. Avoid using overly thin or light font weights, as they can reduce legibility.
Design Software: Adobe InDesign, Photoshop, and Illustrator offer advanced typographic controls.
Web Development: Use CSS properties like font-family, font-size, line-height, and letter-spacing to adjust Chinese fonts.
Online Resources: Google Fonts and Adobe Fonts provide free and paid Chinese fonts.
"Een beeld is meer dan duizend woorden waard" is een Engelstalig adagium dat betekent dat complexe en soms meerdere ideeën kunnen worden overgebracht door een enkel "stilstaand beeld", die de betekenis of essentie effectiever uitdrukt dan een loutere verbale beschrijving. De Noorse toneelschrijver Henrik Ibsen zei eerst: "Duizend woorden laten niet dezelfde diepe indruk achter als een enkele akte." Na zijn dood in 1906 werd dit citaat geplagieerd en para-geformuleerd in wat we nu weten.
"A picture is worth a thousand words" is an English language adage meaning that complex and sometimes multiple ideas can be conveyed by a single "still image", which expresses its meaning or essence more effectively than a mere verbal description. Norwegian playwright Henrik Ibsen first said "A thousand words leave not the same deep impression as does a single deed." After his death in 1906 this quote was plagiarized and para-phrased into what we know now.
"一幅画值千言万语"是一句英语格言，意思是复杂、有时多思想可以通过一个"静止图像"来传达，它比单纯的口头描述更有效地表达其意义或本质。挪威剧作家亨里克·伊布森首先说："千言万语给人留下的印象与单一的一言不语。1906年他去世后，这句话被剽窃，并抄袭到我们现在所了解的。
:
<div class="language">
<button onclick="document.getElementById('ned').style.display='flex'">Nederlands</button><br>
<button onclick="document.getElementById('eng').style.display='block'">English</button><br>
<button onclick="document.getElementById('chn').style.display='inline'">中文</button><br>
</div>
<p id="ned" lang="nl"><span><em>"Een beeld is meer dan duizend woorden waard"</em></span> is een.. weten.</p>
<p id="eng" lang="en"><span><em>"A picture is worth a thousand words"</em></span> is ... now. </p>
<p id="chn" lang="zh"><span><em>"一幅画值千言万语"</em></span>是一句英语格言，...所了解的。</p>
<style>
button{font-size: 1vw; color:blue; background-color: lightgreen;margin-bottom: 1vw;;margin-left: 3%;}
button:hover{background-color:red; cursor: pointer;}
p[lang=nl]{display: none;padding-left: 3vw;}
p[lang=en]{display: none;padding-left: 3vw;}
p[lang=zh]{display: none;padding-left: 3vw;}
</style>
"Een beeld is meer dan duizend woorden waard" is een Engelstalig adagium dat betekent dat complexe en soms meerdere ideeën kunnen worden overgebracht door een enkel "stilstaand beeld", die de betekenis of essentie effectiever uitdrukt dan een loutere verbale beschrijving. De Noorse toneelschrijver Henrik Ibsen zei eerst: "Duizend woorden laten niet dezelfde diepe indruk achter als een enkele akte." Na zijn dood in 1906 werd dit citaat geplagieerd en para-geformuleerd in wat we nu weten.
"A picture is worth a thousand words" is an English language adage meaning that complex and sometimes multiple ideas can be conveyed by a single "still image", which expresses its meaning or essence more effectively than a mere verbal description. Norwegian playwright Henrik Ibsen first said "A thousand words leave not the same deep impression as does a single deed." After his death in 1906 this quote was plagiarized and para-phrased into what we know now.
"一幅画值千言万语"是一句英语格言，意思是复杂、有时多思想可以通过一个"静止图像"来传达，它比单纯的口头描述更有效地表达其意义或本质。挪威剧作家亨里克·伊布森首先说："千言万语给人留下的印象与单一的一言不语。1906年他去世后，这句话被剽窃，并抄袭到我们现在所了解的。
<div class="taal">
<button class="button1" onclick="showHide1()">Nederlands</button>
<button class="button2" onclick="showHide2()">English</button>
<button class="button3" onclick="showHide3()">中文</button>
</div>
<p id="nl" lang="nl"><span><em></em>"Een beeld is...weten.</p>
<p id="en" lang="en"><span><em>"A picture is ... now. </p>
<p id="cn" lang="zh"><span><em>"一幅画...了解的。</p>
<script>
function showHide1() {document.getElementById("nl").style.display = "flex";}
function showHide2() {document.getElementById("en").style.display = "inline";}
function showHide3() {document.getElementById("cn").style.display = "block";}
</script>
<style>
#nl[lang=nl]{display: none;padding-left: 3vw;}
#en[lang=en]{display: none;padding-left: 3vw;}
#cn[lang=zh]{display: none;padding-left: 3vw;}
.button1, .button2, .button3{background-color:lightgreen; color: blue; font-size: 1vw; margin-left: 3%;}
.button1:hover, .button2:hover, .button3:hover{background-color:darkgreen; cursor: pointer;}
</style>
"Een beeld is meer dan duizend woorden waard" is een Engelstalig adagium dat betekent dat complexe en soms meerdere ideeën kunnen worden overgebracht door een enkel "stilstaand beeld", die de betekenis of essentie effectiever uitdrukt dan een loutere verbale beschrijving. De Noorse toneelschrijver Henrik Ibsen zei eerst: "Duizend woorden laten niet dezelfde diepe indruk achter als een enkele akte." Na zijn dood in 1906 werd dit citaat geplagieerd en para-geformuleerd in wat we nu weten.
"A picture is worth a thousand words" is an English language adage meaning that complex and sometimes multiple ideas can be conveyed by a single "still image", which expresses its meaning or essence more effectively than a mere verbal description. Norwegian playwright Henrik Ibsen first said "A thousand words leave not the same deep impression as does a single deed." After his death in 1906 this quote was plagiarized and para-phrased into what we know now.
"一幅画值千言万语"是一句英语格言，意思是复杂、有时多思想可以通过一个"静止图像"来传达，它比单纯的口头描述更有效地表达其意义或本质。挪威剧作家亨里克·伊布森首先说："千言万语给人留下的印象与单一的一言不语。1906年他去世后，这句话被剽窃，并抄袭到我们现在所了解的。
<p class="langue" id="ndl"lang="nl"><span><em>"Een beeld ... weten.</p>
<p class="langue" id="egl"lang="en"><span><em>"A picture is ... know now. </p>
<p class="langue" id="chi" lang="zh"><span><em>"一幅画...了解的。</p>
<div class="langue">
<button id="button4" onclick="showHide4()">Nederlands</button>
<button id="button5" onclick="showHide5()">English</button>
<button id="button6" onclick="showHide6()">中文</button>
</div>
<script>
function showHide4() {
document.getElementById("ndl").style.display = "flex";
document.getElementById("egl").style.display = "none";
document.getElementById("chi").style.display = "none";
}
function showHide5() {
document.getElementById("egl").style.display = "inline";
document.getElementById("ndl").style.display = "none";
document.getElementById("chi").style.display = "none";
}
function showHide6() {
document.getElementById("chi").style.display = "block";
document.getElementById("ndl").style.display = "none";
document.getElementById("egl").style.display = "none";
}
</script>
<style>
#ndl[lang=nl]{display: none;padding-left: 3vw;}
#egl[lang=en]{display: none;padding-left: 3vw;}
#chi[lang=zh]{display: none;padding-left: 3vw;}
#button4, #button5, #button6{background-color:silver; color: brown; font-size: 1vw; margin-left: 3%;}
#button4:hover, #button5:hover, #button6:hover{background-color:cyan; cursor: pointer;}
</style>
"Een beeld is meer dan duizend woorden waard" is een Engelstalig adagium dat betekent dat complexe en soms meerdere ideeën kunnen worden overgebracht door een enkel "stilstaand beeld", die de betekenis of essentie effectiever uitdrukt dan een loutere verbale beschrijving. De Noorse toneelschrijver Henrik Ibsen zei eerst: "Duizend woorden laten niet dezelfde diepe indruk achter als een enkele akte." Na zijn dood in 1906 werd dit citaat geplagieerd en para-geformuleerd in wat we nu weten.
"A picture is worth a thousand words" is an English language adage meaning that complex and sometimes multiple ideas can be conveyed by a single "still image", which expresses its meaning or essence more effectively than a mere verbal description. Norwegian playwright Henrik Ibsen first said "A thousand words leave not the same deep impression as does a single deed." After his death in 1906 this quote was plagiarized and para-phrased into what we know now.
"一幅画值千言万语"是一句英语格言，意思是复杂、有时多思想可以通过一个"静止图像"来传达，它比单纯的口头描述更有效地表达其意义或本质。挪威剧作家亨里克·伊布森首先说："千言万语给人留下的印象与单一的一言不语。1906年他去世后，这句话被剽窃，并抄袭到我们现在所了解的。
<button id="btn1" onclick="document.getElementsByClassName('nederlands')[0].style.display='inline'">Nederlands</button>
<button id="btn2" onclick="document.getElementsByClassName('english')[0].style.display='block'">English</button>
<button id="btn3" onclick="document.getElementsByClassName('chinese')[0].style.display='flex'">中文</button><br>
<p class="nederlands" lang="nl"><span><em><span><em>"Een beeld ...nu weten.</p>
<p class="english" lang="en"><span><em>"A picture is... know now. </p>
<p class="chinese" lang="zh"><span><em>"一幅画...现在所了解的。</p>
<style>
#btn1, #btn2, #btn3{font-size: 1vw; color:white; background-color: green;margin-bottom: 1vw;;margin-left: 3%;}
#btn1:hover, #btn2:hover, #btn3:hover{background-color:red; cursor: pointer;}
</style>
"Een beeld is meer dan duizend woorden waard" is een Engelstalig adagium dat betekent dat complexe en soms meerdere ideeën kunnen worden overgebracht door een enkel "stilstaand beeld", die de betekenis of essentie effectiever uitdrukt dan een loutere verbale beschrijving. De Noorse toneelschrijver Henrik Ibsen zei eerst: "Duizend woorden laten niet dezelfde diepe indruk achter als een enkele akte." Na zijn dood in 1906 werd dit citaat geplagieerd en para-geformuleerd in wat we nu weten.
"A picture is worth a thousand words" is an English language adage meaning that complex and sometimes multiple ideas can be conveyed by a single "still image", which expresses its meaning or essence more effectively than a mere verbal description. Norwegian playwright Henrik Ibsen first said "A thousand words leave not the same deep impression as does a single deed." After his death in 1906 this quote was plagiarized and para-phrased into what we know now.
"一幅画值千言万语"是一句英语格言，意思是复杂、有时多思想可以通过一个"静止图像"来传达，它比单纯的口头描述更有效地表达其意义或本质。挪威剧作家亨里克·伊布森首先说："千言万语给人留下的印象与单一的一言不语。1906年他去世后，这句话被剽窃，并抄袭到我们现在所了解的。
<div class="langue">
<button id="button4" onclick="showHide7()">Nederlands</button>
<button id="button5" onclick="showHide8()">English</button>
<button id="button6" onclick="showHide9()">中文</button>
</div>
<p class="nederlands" lang="nl"><span><em><span><em>"Een beeld is meer dan duizend woorden waard"
</em></span> is een Engelstalig adagium dat betekent dat complexe en soms meerdere ideeën kunnen worden
overgebracht door een enkel "stilstaand beeld", die de betekenis of essentie effectiever uitdrukt dan een loutere
verbale beschrijving. De Noorse toneelschrijver Henrik Ibsen zei eerst: "Duizend woorden laten niet dezelfde diepe
indruk achter als een enkele akte." Na zijn dood in 1906 werd dit citaat geplagieerd en para-geformuleerd in
wat we nu weten.
</p><br> <p class="english" lang="en"><span><em>"A picture is worth a thousand
words"</em></span> is an English language adage meaning that complex and sometimes multiple ideas can be
conveyed by a single "still image", which expresses its meaning or essence more effectively than a mere verbal
description. Norwegian playwright Henrik Ibsen first said "A thousand words leave not the same deep impression as
does a single deed." After his death in 1906 this quote was plagiarized and para-phrased into what we know now. </p><br>
<p class="chinese" lang="zh"><span><em>"一幅画值千言万语"</em></span>是一句英语格言，意思是复杂、有时多思想
可以通过一个"静止图像"来传达，它比单纯的口头描述更有效地表达其意义或本质。挪威剧作家亨里克·伊布森首先说：
"千言万语给人留下的印象与单一的一言不语。1906年他去世后，这句话被剽窃，并抄袭到我们现在所了解的。</p>
<script>
function showHide7() {
document.getElementsByClassName("nederlands")[1].style.display = "flex";
document.getElementsByClassName("english")[1].style.display = "none";
document.getElementsByClassName("chinese")[1].style.display = "none";
}
function showHide8() {
document.getElementsByClassName("nederlands")[1].style.display = "none";
document.getElementsByClassName("english")[1].style.display = "block";
document.getElementsByClassName("chinese")[1].style.display = "none";
}
function showHide9() {
document.getElementsByClassName("nederlands")[1].style.display = "none";
document.getElementsByClassName("english")[1].style.display = "none";
document.getElementsByClassName("chinese")[1].style.display = "inline";
}
</script>
<style>
p[lang=nl]{display: none;padding-left: 3vw;}
p[lang=en]{display: none;padding-left: 3vw;}
p[lang=zh]{display: none;padding-left: 3vw;}
#button7, #button8, #button9{background-color:silver; color: brown; font-size: 1vw; margin-left: 3%;}
#button7:hover, #button8:hover, #button9:hover{background-color:cyan; cursor: pointer;}
</style>